<template>
    <div>
        <ItemMusicTop :playlist="playlist"></ItemMusicTop>
        <ItemMusicList
            :subscribedCount="playlist.subscribedCount"
            :itemList="itemList"
        ></ItemMusicList>
    </div>
</template>

<script>
import service from "@/request/index.js";
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import ItemMusicList from "@/components/item/ItemMusicList.vue";
import { useRoute } from "vue-router";
export default {
    name: "ItemMusic",
    data() {
        return {
            playlist: {},
            itemList: [],
        };
    },
    computed: {
        id() {
            return useRoute().params.id;
        },
    },
    components: {
        ItemMusicTop,
        ItemMusicList,
    },
    methods: {
        async fetchMusicList() {
            const res = await service.get(`/playlist/detail?id=${this.id}`);
            // console.log("123", res.data.playlist);
            this.playlist = res.data.playlist;
        },
        async fetchItem(data) {
            const res = await service.get(
                `/playlist/track/all?id=${data.id}&limit=${data.limit}&offset=${data.offset}`
            );
            // console.log("fetchItem", res);
            this.itemList = res.data.songs;
        },
    },
    mounted() {
        this.fetchMusicList();
        this.fetchItem({ id: this.id, limit: 10, offset: 0 });
        // console.log(useRoute().params);
    },
};
</script>

<style lang="less" scoped>
</style>